<template>
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">
          <Aside></Aside>
        </el-aside>
  
        <el-container>
          <el-header>
            <Header></Header>
          </el-header>
          <el-main>
            
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script setup name="app">
import Aside from '@/components/Aside.vue'
import Header from '@/components/Header.vue'
</script>
  
  <style lang="scss" scoped>
 
    .common-layout {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      .el-container {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      .el-aside {
        /* margin-right: 10px; */
        border-right: 1px solid #f6f0f0;
        box-shadow: 1px solid #ccc;
      }
      .el-header {
        background-color:  rgb(51.2, 126.4, 204);
      }
    }
  
  </style>
  